<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
    <script>
        /* 
            Node.firstChild 只读属性返回树中节点的第一个子节点，如果节点是无子节点，则返回 null。
            Node.lastChild 是一个只读属性，返回当前节点的最后一个子节点。如果父节点为一个元素节点，则子节点通常为一个元素节点，或一个文本节点，或一个注释节点。如果没有子节点，则返回 null。
            firstElementChild:只读属性返回树中节点的第一个子元素节点
        */
        const ulObj = document.querySelector("ul");
        console.log(ulObj.firstChild);
        console.log(ulObj.firstElementChild);

        console.log(ulObj.lastChild);
        console.log(ulObj.lastElementChild);

    </script>
</body>

</html>